<template>
  <div class="box">
    <!-- 顶部导航 -->
    <top-nav></top-nav>
    <!-- 搜索框部分 -->
    <div class="container-fulid">
      <div class="head-box">
        <div class="detail-header">
          <div class="detail-header-left">
            <img src="~assets/image/tmail.png" alt="" />
            <p>生活小事 随时看天猫超市</p>
          </div>
          <div class="detail-header-right">
            <form>
              <label class="seacherbox"
                ><input
                  type="text"
                  class="aa"
                  placeholder="搜索天猫超市商品"
                /><button>搜索</button></label
              >
            </form>
          </div>
        </div>
        <div class="detail-nav">
          <div class="all">
            <h5>所有商品分类</h5>
          </div>
          <div class="deyail-nav-item">
            首页
            <div class="hr"></div>
          </div>
          <div class="deyail-nav-item">
            企业采购
            <div class="hr"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- info -->
    <dcontent-view :shop="shop"></dcontent-view>
  </div>
</template>

<script>
import TopNav from "../../components/content/TopNav.vue";
import DcontentView from "views/detail/dcontent/DcontentView.vue";
import { useRoute } from "vue-router";
import { reactive } from "vue";
export default {
  components: { TopNav, DcontentView },
  setup(props) {
    document.body.scrollTop = 0;
    const route = useRoute();
    let shop = reactive({});
    shop = route.query;

    return {
      shop,
    };
  },
};
</script>

<style scoped>
.container-fulid {
  background-color: #ffffff;
}
.head-box {
  border-bottom: 1px solid#000;
  padding-top: 30px;
  background: #ffffff;
  width: 1190px;
  margin: 0 auto;
}
.head-box img {
  width: 120px;
  height: 38px;
}
.head-box p {
  margin: 10px auto;
  font-weight: bold;
}
.detail-header {
  display: flex;
}
.detail-header-left {
  flex: 0.5;
}
.detail-header-right {
  flex: 1;
}
.seacherbox {
  margin: 10px auto;
  float: left;
}
.seacherbox > input {
  outline: none;
  width: 447px;
  height: 40px;
  border: 3px solid rgb(29, 238, 29);
}
.aa:focus {
  border: 3px solid rgb(29, 238, 29);
}
.seacherbox > button {
  width: 90px;
  height: 40px;
  background-color: rgb(29, 238, 29);
  border: 3px solid rgb(29, 238, 29);
  color: #ffffff;
}
.detail-nav {
  margin-left: 100px;
  margin-top: 20px;
  display: flex;
}
.all {
  width: 200px;
  height: 40px;
  background: #000000;
  color: #ffffff;
}
.all > h5 {
  padding: 10px;
  font-weight: bold;
  font-size: 15px;
}
.deyail-nav-item {
  font-weight: bold;
  margin: 10px 20px 10px 30px;
}
.hr {
  margin: auto 20px;
  height: 15px;
  width: 1px;
  display: inline-block;
  background: #d8c1c1;
}
</style>